<template>
  <section :id="name" :ref="name" class="small-padding">
    <div class="image-enter hidden-xs"></div>

    <div class="container text-center light-typo">
      <div class="description">
        <p>我们习惯了早晚刷牙来爱护牙齿，却很少主动想到爱护眼睛，<br>眼睛是人体最重要的器官，闭上眼睛我们将寸步难行。</p>
        <p>现在就让我们开始爱眼的一课，让护眼变成一件比刷牙还要简单的事情。</p>
      </div>

      <a class="btn btn-dc btn-small" href="#">进入爱眼课堂</a>

      <br><br>

      <!-- <button class="add"></button> -->
    </div>

  </section>
</template>

<script>

export default {
  props:{
    name:'',
  },
  components: {

  },
  computed: {

  },
  methods: {
    toDiv(){
      window.scrollTo({
        //滚动到元素位置
        top: this.$refs[this.name].getBoundingClientRect().top + window.scrollY,//推荐使用。getBoundingClientRect 相对于当前视口的位置
        behavior: "smooth" // 平滑滚动
      });
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>



</style>

